<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="static/css/output-value-detail.css" />
    <link rel="stylesheet" href="static/css/commonality.css" />
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <script src="./static/js/main.js"></script>
    <script src="./static/js/echarts.min.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js"></script>
    <script src="./static/laydate/laydate.js"></script>

    <title>产值分析</title>
</head>

<body>
    <div class="detail">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li>
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li>
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li class="selectBar">
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li>
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li>
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main" id="outputValue">
            <div class="main-mian">
                <div class="main-center">
                    <div class="content-content">
                        <div class="content-search">
                            <div>
                                行业产值统计年份：
                            </div>
                            <div>
                                <input type="text" id="industryYear" v-model="industry.year" required lay-verify="required" readonly class="layui-input">
                            </div>
                        </div>
                        <div id="industry" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="content-content">
                        <div class="content-search">
                            <div>
                                渠道产值统计年份：
                            </div>
                            <div>
                                <input type="text" id="channelYear" v-model="channel.year" required lay-verify="required" readonly class="layui-input">
                            </div>
                        </div>
                        <div id="channel" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="content-content content-content-therr">
                        <div class="content-search">
                            <div>
                                地区产值统计年份：
                            </div>
                            <div>
                                <input type="text" id="areaYear" v-model="area.year" required lay-verify="required" readonly class="layui-input">
                            </div>
                        </div>
                        <div id="area" style="width: 600px;height:400px;"></div>
                    </div>
                    <div class="content-content content-content-four">
                        <div class="content-search">
                            <div class="content-four-select">
                                <select style="height:35px;" class="layui-select" @change="townIndustry.town=$event.target.value;getTownIndustryOutputValue()">
                                    <option v-for="town in area.towns" v-bind:value="town.code">{{ town.name }}</option>
                                </select>
                            </div>
                            <div>
                                个镇产行业产值统计年份：
                            </div>
                            <div>
                                <input type="text" id="townIndustryYear" v-model="townIndustry.year" required lay-verify="required" readonly class="layui-input">
                            </div>
                        </div>
                        <div id="townIndustry" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
                <div class="main-right"></div>

            </div>
        </div>
    </div>
</body>
<script>

    laydate.render({
        elem: '#industryYear', //指定元素
        type: 'year',
        done: function (value, date) {
            outputValue.industry.year = date.year;
            outputValue.getIndustryOutputValue();
        }
    });

    laydate.render({
        elem: '#channelYear', //指定元素
        type: 'year',
        done: function (value, date) {
            outputValue.channel.year = date.year;
            outputValue.getChannelOutputValue();
        }
    });

    laydate.render({
        elem: '#areaYear', //指定元素
        type: 'year',
        done: function (value, date) {
            outputValue.area.year = date.year;
            outputValue.getAreaOutputValue();
        }
    });

    laydate.render({
        elem: '#townIndustryYear', //指定元素
        type: 'year',
        done: function (value, date) {
            outputValue.townIndustry.year = date.year;
            outputValue.getTownIndustryOutputValue();
        }
    });

    Vue.use(VueResource);
    var outputValue = new Vue({
        el: "#outputValue",
        data: {
            industry: {
                year: currentYear(),
                industrial: {
                    name: "工业",
                    typeValue: 1,
                    value: 0
                },
                agricultural: {
                    name: "农业",
                    typeValue: 2,
                    value: 0
                }
            },
            channel: {
                year: currentYear(),
                online: {
                    name: "线上",
                    typeValue: 1,
                    value: 0
                },
                offline: {
                    name: "线下",
                    typeValue: 2,
                    value: 0
                }
            },
            area: {
                year: currentYear(),
                townNames: [
                    "城关镇", "兴隆镇", "老县镇", "大贵镇", "三阳镇", "洛河镇", "广佛镇", "八仙镇", "长安镇", "正阳镇", "西河镇"
                ],
                towns: [
                    { code: "610926100", name: "城关镇", value: 0 },
                    { code: "610926101", name: "兴隆镇", value: 0 },
                    { code: "610926102", name: "老县镇", value: 0 },
                    { code: "610926103", name: "大贵镇", value: 0 },
                    { code: "610926104", name: "三阳镇", value: 0 },
                    { code: "610926105", name: "洛河镇", value: 0 },
                    { code: "610926106", name: "广佛镇", value: 0 },
                    { code: "610926107", name: "八仙镇", value: 0 },
                    { code: "610926108", name: "长安镇", value: 0 },
                    { code: "610926109", name: "正阳镇", value: 0 },
                    { code: "610926110", name: "西河镇", value: 0 }
                ]
            },
            townIndustry: {
                year: currentYear(),
                town: "610926100",
                industrial: {
                    name: "工业",
                    typeValue: 1,
                    value: 0
                },
                agricultural: {
                    name: "农业",
                    typeValue: 2,
                    value: 0
                }
            }
        },
        methods: {
            getIndustryOutputValue: function () {
                this.$http.get(getHttpServer() + "/api/web/statistical/industry/" + this.industry.year)
                    .then(function (response) {
                        var industrialList = response.data.data;
                        if (industrialList.length === 0) {
                            this.industry.industrial.value = 0
                            this.industry.agricultural.value = 0
                        } else {
                            //解析返回值
                            for (var i in industrialList) {
                                if (industrialList[i].typeValue === this.industry.industrial.typeValue) {
                                    this.industry.industrial.value = industrialList[i].outputValue
                                }
                                else if (industrialList[i].typeValue === this.industry.agricultural.typeValue) {
                                    this.industry.agricultural.value = industrialList[i].outputValue
                                }
                            }
                        }
                        // 行业产值分析
                        var industryChart = echarts.init(document.getElementById('industry'));
                        var industryOption = {
                            title: {
                                text: this.industry.year + '年行业产值',
                                subtext: this.industry.year + "年",
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['工业', '农业']
                            },
                            series: [{
                                name: '产值(万元)',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    this.industry.industrial,
                                    this.industry.agricultural
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        industryChart.setOption(industryOption);
                    }).catch(function (response) {
                    });
            },
            getChannelOutputValue: function () {
                this.$http.get(getHttpServer() + "/api/web/statistical/channel/" + this.channel.year)
                    .then(function (response) {
                        var channelList = response.data.data;
                        if (channelList.length === 0) {
                            this.channel.online.value = 0
                            this.channel.offline.value0
                        } else {
                            //解析返回值
                            for (var i in channelList) {
                                if (channelList[i].typeValue === this.channel.online.typeValue) {
                                    this.channel.online.value = channelList[i].outputValue
                                }
                                else if (channelList[i].typeValue === this.channel.offline.typeValue) {
                                    this.channel.offline.value = channelList[i].outputValue
                                }
                            }
                        }
                        var channelChart = echarts.init(document.getElementById('channel'));
                        var channelOption = {
                            title: {
                                text: this.channel.year + '年渠道产值',
                                subtext: this.channel.year + "年",
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['线上', '线下']
                            },
                            series: [{
                                name: '产值(万元)',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    this.channel.online,
                                    this.channel.offline
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        channelChart.setOption(channelOption);
                    }).catch(function (response) {
                    });
            },
            getAreaOutputValue: function () {
                this.$http.get(getHttpServer() + "/api/web/statistical/area/" + this.area.year)
                    .then(function (response) {
                        var areaList = response.data.data;
                        if (areaList.length === 0) {
                            for (i in this.area.towns) {
                                this.area.towns[i].value = 0
                            }
                        } else {
                            //解析返回值
                            for (var i in this.area.towns) {
                                for (j in areaList) {
                                    if (this.area.towns[i].code === areaList[j].town) {
                                        this.area.towns[i].value = areaList[j].outputValue;
                                    }
                                }
                            }
                        }

                        //地区产值
                        var areaChart = echarts.init(document.getElementById('area'));
                        var areaOption = {
                            title: {
                                text: this.area.year + '年地区产值',
                                subtext: this.area.year + "年",
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: this.area.townNames
                            },
                            series: [{
                                name: '产值(万元)',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: this.area.towns,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        areaChart.setOption(areaOption);
                    }).catch(function (response) {
                    });
            },
            getTownIndustryOutputValue: function () {
                this.$http.get(getHttpServer() + "/api/web/statistical/area/" + this.townIndustry.town + "/" + this.townIndustry.year)
                    .then(function (response) {
                        var townIndustryList = response.data.data;
                        //解析返回值
                        if (townIndustryList.length === 0) {
                            this.townIndustry.industrial.value = 0
                            this.townIndustry.agricultural.value = 0
                        } else {
                            for (var i in townIndustryList) {
                                if (townIndustryList[i].typeValue === this.townIndustry.industrial.typeValue) {
                                    this.townIndustry.industrial.value = townIndustryList[i].outputValue
                                }
                                else if (townIndustryList[i].typeValue === this.townIndustry.agricultural.typeValue) {
                                    this.townIndustry.agricultural.value = townIndustryList[i].outputValue
                                }
                            }
                        }
                        // 行业产值分析
                        var townIndustryChart = echarts.init(document.getElementById('townIndustry'));
                        var townIndustryOption = {
                            title: {
                                text: this.townIndustry.year + '年个镇产行业产值',
                                subtext: this.townIndustry.year + "年",
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['工业', '农业']
                            },
                            series: [{
                                name: '产值(万元)',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [
                                    this.townIndustry.industrial,
                                    this.townIndustry.agricultural
                                ],
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }]
                        };
                        townIndustryChart.setOption(townIndustryOption);
                    });
            },

        }
    });
    outputValue.getIndustryOutputValue();
    outputValue.getChannelOutputValue();
    outputValue.getAreaOutputValue();
    outputValue.getTownIndustryOutputValue();

</script>

</html>